<script lang="js" setup>
import { inject, ref,reactive } from "vue"
import {
    DeleteOutlined,
    EditOutlined,
    VerticalAlignTopOutlined,

} from '@ant-design/icons-vue';

const props = defineProps({
    todo: Object,
    isMoreActions: Boolean,
})

// formData
const addFormData = reactive({
  id: 0,
  title: "",
  content: "",
  isDo: false
})


const usedelete = inject('delete')

// delete todo
const deleteTodo = (id) => {
    usedelete(id)
}


// edit
const isEdit = ref(false)

const useEdit = inject('edit')

const editTodo = () => {
   let res =  useEdit(addFormData.title,addFormData.content,addFormData.id)
    if (res) {
        isEdit.value = false
    }
}

// set top
const useSetTop = inject('settop')

const setTop = (id,title) => {
    useSetTop(id,title)
}
</script>

<template>
      <!-- edit todo modal -->
  <a-modal v-model:open="isEdit" title="编辑todo" @ok="editTodo" centered cancelText="算了" okText="搞定" @cancel="addFormData.title = '',addFormData.content = ''">
    <a-flex gap="small" vertical>
      <a-input v-model:value="addFormData.title" placeholder="标题" />
      <a-input v-model:value="addFormData.content" autofocus placeholder="描述" />
    </a-flex>
  </a-modal>
    <div class="todo">
        <div class="leading" :style="{ opacity: todo.isDo ? '0.6' : '1' }">
            <div class="title" :style="{ textDecoration: todo.isDo ? 'line-through ' : 'none' }">{{ todo.title }}</div>
            <div class="content" :style="{ textDecoration: todo.isDo ? 'line-through ' : 'none' }">{{ todo.content }}</div>
        </div>

        <div class="actions">
            <a-config-provider :theme="{
                token: {
                    colorPrimary: '#00b96b',
                },
            }">
                <a-checkbox v-model:checked="todo.isDo"></a-checkbox>

                <a-button type="primary"  size="small" v-show="isMoreActions" @click="isEdit = true,addFormData.title = todo.title,addFormData.content = todo.content,addFormData.id = todo.id">
                    <template #icon >
                        <EditOutlined />
                    </template>
                </a-button>

                <a-button  size="small" v-show="isMoreActions" @click="setTop(todo.id,todo.title)">
                    <template #icon>
                        <VerticalAlignTopOutlined />
                    </template>
                </a-button>

                <a-button type="primary" danger size="small" v-show="isMoreActions" @click="deleteTodo(todo.id)">
                    <template #icon>
                        <DeleteOutlined />
                    </template>
                </a-button>

             
            </a-config-provider>

        </div>
    </div>
</template>

<style lang="scss" >
.todo {
    width: 100%;
    height: 48px;
    background-color: white;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .leading {
        user-select: none;

        .title {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 24px;
            // transition: all 0.3s;
        }

        .content {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 18px;
        }
    }

    .actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;


        .ant-checkbox-inner {
            width: 25px;
            height: 25px;
        }

        .ant-checkbox-checked .ant-checkbox-inner:after {
            transform: rotate(45deg) scale(1.6) translate(-10%, -50%);
        }
    }
}
</style>